<template>
	<view class="alldiv">
		<c-nav-bar :title="titleHeader"></c-nav-bar>
		<ksp-cropper mode="free" :width="200" :height="320" :maxWidth="750" :maxHeight="1024" :url="imgurl" @cancel="oncancel"
			@ok="onok"></ksp-cropper>
		<view class="caijian">
			<view class="caijiantop">
				<image mode="aspectFit" :src="path" />
			</view>
			<view class="caijianbottom">
				<view class="xuanzhuan">
					<view class="xuanzhuan1" @click="select">
						<view class="fansile1">
							<u--image src="https://i.ringzle.com/file/20240113/ae4e9b713e8c48a78f568a1444a6bac9.png"
								width="60rpx" height="60rpx"></u--image>
						</view>
						<view class="fansile2">
							添加/替换
						</view>
					</view>

				</view>
				<view class="shibie" @click="shibieimg">
					开始识别
				</view>
			</view>

		</view>

		<u-popup :show="showzhanshi" :round="10" mode="bottom" @close="closezhanshi">
			<view class="wuyusile">
				<view class="toubu">
					识别结果
					<image src="@/static/index/steamerTicket/icon_close.png" @tap="closezhanshi"></image>
				</view>
				<view class="meiyou">
					没有识别到景区，为您推荐以下景点
				</view>
				<view class="tuijian" v-for="(item,index) in noshibieList" :key="index">
					<view class="tuijian1">
						<u--image :src="item.pic" width="132rpx" height="132rpx"></u--image>
					</view>
					<view class="tuijian2">
						<view class="cusiren1">
							{{item.name}}
						</view>
						<view class="cusiren2">
							建议游玩{{item.suggestTime}}
						</view>
						<view class="cusiren3">
							开放时间:{{item.openDate}}
						</view>
					</view>
					<view class="tuijian3">
						<view class="cao1" @click="shanchu(item,index)">
							<u--image src="https://i.ringzle.com/file/20240113/fd285b5e1aee4c45b5c2fed57a560611.png"
								width="40rpx" height="40rpx"></u--image>
						</view>
						<view class="cao2">
							¥ {{item.startPrice}} 起
						</view>
					</view>
				</view>
				<view class="xianlu" @click="zhintuij">
					智能规划线路
				</view>
			</view>
		</u-popup>

		<u-popup :show="showzhanshitwo" :round="10" mode="bottom" @close="closezhanshi">
			<view class="wuyusile wuyusile2">
				<view class="toubu">
					识别结果
					<image src="@/static/index/steamerTicket/icon_close.png" @tap="closezhanshi"></image>
				</view>
				<view class="sbjg_content">
					<view class="diyiming">
						No.1
					</view>
					<view class="diyimingmiaoshu">
						{{shibiexinxi.picContent}}
					</view>
				</view>
				<view class="paiban">
					<view class="qingchu2">
						<view class="zhuhang1">
							逐行排版
						</view>
						<view class="zhuhang2">
							<u--image src="https://i.ringzle.com/file/20240113/e2926919e7ee4714ab88a6908627013e.png"
								width="18rpx" height="12rpx"></u--image>
						</view>
					</view>
					<view class="qingchu1">
						轻触以编辑
					</view>
				</view>
				<view class="jiance">
					检测到您上传的攻略包含以下景点：
				</view>
				<view class="sbjg_scenes">
					<view class="shengsi" v-for="(item,index) in shibiexinxi.spotList" :key="index">
						{{item.name}}
					</view>
				</view>
				<view class="shifou">
					是否为您推荐相关的路线攻略？
				</view>
				<view class="quxiaoqueding">
					<view class="quxiaoqueding1" @click="quxiaoimg">
						取消
					</view>
					<view class="quxiaoqueding2" @click="quedinglvtu">
						确定
					</view>
				</view>
			</view>
		</u-popup>

		<u-toast ref="uToast"></u-toast>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				titleHeader: '照片识别',
				shibiejieguo: false,
				showzhanshi: false,
				showzhanshitwo: false,
				lodading: true,
				imgurl: "",
				path: "",
				shibiexinxi: {},
				noshibieList: [],
			}
		},
		onLoad() {
			this.select();
			// uni.chooseImage({
			// 	count: 1, //默认9
			// 	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			// 	sourceType: ['album'], //从相册选择
			// 	success: function (res) {
			// 		console.log(JSON.stringify(res.tempFilePaths));
			// 	}
			// });

		},
		methods: {


			quedinglvtu() {
				let mynavData = JSON.stringify(this.shibiexinxi.spotList); // 这里转换成 字符串

				uni.navigateTo({
					url: '/pagesTrip/custom-travel/routeDetail?shibieimg=' + mynavData
				})
			},
			quxiaoimg() {
				this.showzhanshi = false;
				this.showzhanshitwo = false;
				this.shibiexinxi = {}
			},
			shanchu(e, i) {
				this.noshibieList.splice(i, 1)
			},
			zhintuij() {
				if (this.noshibieList.length == 0) {
					this.$refs.uToast.show({
						type: 'success',
						title: '',
						message: "暂无法为您规划路线",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
					})
				} else {
					let mynavData = JSON.stringify(this.noshibieList); // 这里转换成 字符串

					uni.navigateTo({
						url: '/pagesTrip/custom-travel/routeDetail?shibieimg=' + mynavData
					})
				}
			},
			closezhanshi() {
				this.showzhanshi = false;
				this.showzhanshitwo = false;
			},
			shibieimg() {
				if (this.path) {

					let baseimg = 'data:image/jpeg;base64,' + wx.getFileSystemManager().readFileSync(this.path, 'base64');

					this.$api.post('/api/customrec/identifyPic', {
						"identifyPic": baseimg
					}).then(res => {

						if (res.data.code === 0) {
							if (res.data.data.spotList.length == 0) {
								this.shibiexinxi = {};

								this.weishibie();
							} else {
								this.showzhanshi = false;
								this.showzhanshitwo = true;
								this.shibiexinxi = res.data.data;
							}
						} else this.$showModal(res.data.msg);
					})


				} else {
					this.$refs.uToast.show({
						type: 'success',
						title: '',
						message: "请添加图片",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
					})
				}
			},
			weishibie() {
				this.$api.post('/api/customrec/queryRecommendSpotList', {}).then(res => {
					if (res.data.code === 0) {
						this.noshibieList = res.data.data;
						this.showzhanshi = true;
						this.showzhanshitwo = false;
					} else this.$showModal(res.data.msg);
				})


			},

			select() {
				uni.chooseImage({
					count: 1,
					success: (rst) => {
						// 设置url的值，显示控件
						this.imgurl = rst.tempFilePaths[0];
					}
				});
			},
			onok(ev) {
				this.imgurl = "";
				this.path = ev.path;
			},
			oncancel() {
				// url设置为空，隐藏控件
				this.imgurl = "";
			}
		}
	}
</script>





<style lang="scss" scoped>
	.quxiaoqueding2 {
		width: 320rpx;
		height: 100%;
		border-radius: 16px;
		border: 1px solid #212C3B;
		font-size: 32rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		color: #FEFFFE;
		line-height: 88rpx;
		text-align: center;
		background: #212C3B;
	}

	.quxiaoqueding1 {
		width: 320rpx;
		height: 100%;
		border-radius: 16px;
		border: 1px solid #212C3B;
		font-size: 32rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		color: #212C3B;
		line-height: 88rpx;
		text-align: center;
	}

	.quxiaoqueding {
		width: 710rpx;
		height: 88rpx;
		display: flex;
		justify-content: space-between;
		position: absolute;
		bottom: 10rpx;
	}

	.shifou {
		width: 710rpx;
		height: 54rpx;
		font-size: 30rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #111111;
		line-height: 54rpx;
	}

	.shengsi {
		width: 710rpx;
		height: 50rpx;
		font-size: 30rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		color: #025EA7;
		line-height: 50rpx;
	}

	.jiance {
		width: 710rpx;
		height: 80rpx;
		font-size: 30rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #111111;
		line-height: 80rpx;
	}

	.zhuhang1 {
		height: 68rpx;
		font-size: 26rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #222222;
		line-height: 68rpx;
	}

	.qingchu1 {
		width: 130rpx;
		height: 68rpx;
		font-size: 26rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #AAAAAA;
		line-height: 68rpx;
	}

	.qingchu2 {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.paiban {
		width: 710rpx;
		height: 68rpx;
		background: #F9F9F9;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.diyiming {
		width: 61rpx;
		height: 34rpx;
		background: #CDF4F0;
		border: 2px solid #222222;
		font-size: 26rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #222222;
		line-height: 34rpx;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.diyimingmiaoshu {
		// width: 100%;
		min-height: 34rpx;
		background: #CDF4F0;
		border: 2px solid #222222;
		font-size: 26rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #222222;
		line-height: 34rpx;
		padding: 10rpx;
		margin-bottom: 20rpx;
	}

	.xianlu {
		position: fixed;
		bottom: 0rpx;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 710rpx;
		height: 88rpx;
		background: #212C3B;
		border-radius: 16px;
		font-size: 32rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		color: #FEFFFE;
		line-height: 88rpx;
		text-align: center;
	}

	.cusiren3 {
		width: 478rpx;
		height: 44rpx;
		font-size: 22rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #88919D;
		line-height: 44rpx;
		padding-left: 20rpx;
	}

	.cusiren2 {
		width: 478rpx;
		height: 44rpx;
		font-size: 22rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #88919D;
		line-height: 44rpx;
		padding-left: 20rpx;
	}

	.cusiren1 {
		width: 478rpx;
		height: 44rpx;
		font-size: 30rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		color: #111111;
		line-height: 44rpx;
		padding-left: 20rpx;
	}

	.tuijian2 {
		width: 478rpx;
		height: 132rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;

	}

	.tuijian3 {
		width: 100rpx;
		height: 132rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}

	.tuijian {
		width: 710rpx;
		height: 162rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		border-bottom: 1rpx solid #EFEFEF;
	}

	.tuijian1 {
		width: 132rpx;
		height: 132rpx;
	}
	::v-deep .tuijian1 image{
		border-radius: 10rpx !important;
	}

	.meiyou {
		width: 750rpx;
		height: 90rpx;
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #FF7D01;
		line-height: 60rpx;
		text-align: center;
	}

	.toubu {
		width: 100%;
		height: 90rpx;
		font-size: 32rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		color: #111111;
		line-height: 90rpx;
		text-align: center;
		position: relative;
		image{
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			right: 10rpx;
			top: 50%;
			margin-top: -18rpx;
		}
	}

	.alldiv {
		width: 750rpx;
		height: 100%;
		// padding-top: 40rpx;
	}

	.wuyusile {
		width: 710rpx;
		height: 1080rpx;
		padding-bottom: 300rpx;
		margin: 0 auto;
		position: relative;
		
		&.wuyusile2{
			padding-bottom: 205rpx;
		}
		.sbjg_content{
			max-height: 358rpx;
			padding: 56rpx 0 22rpx;
			overflow-y: auto;
		}
		.sbjg_scenes{
			max-height: 344rpx;
			padding: 10rpx 0;
			overflow-y: auto;
		}
	}

	.loadingimgs {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 200rpx;
		/* 自定义宽度 */
		height: 200rpx;
		/* 自定义高度 */
		background-color: #EFEFEF;
	}

	.fansile2 {
		width: 200rpx;
		text-align: center;
		height: 100rpx;
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #808080;
		line-height: 80rpx;
	}

	.fansile1 {
		width: 60rpx;
		height: 60rpx;
	}

	.xuanzhuan1 {
		width: 200rpx;
		height: 230rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.xuanzhuan {
		width: 750rpx;
		height: 230rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.shibie {
		width: 670rpx;
		height: 88rpx;
		background: #212C3B;
		border-radius: 16px;
		font-size: 32rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		color: #FEFFFE;
		line-height: 88rpx;
		text-align: center;
		margin: 0 auto;
	}

	.caijianbottom {
		width: 750rpx;
		height: 400rpx;
		background-color: #fff;
	}

	.caijiantop {
		width: 750rpx;
		flex-grow: 1;
		margin-top: 190rpx;
		background-color: #EFEFEF;
		display: flex;
		align-items: center;
		justify-content: center;
		
		image {
			margin-top: 20rpx;
		}
	}

	.caijian {
		width: 750rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
</style>